<template>
  <el-dialog
    :title="$t('提现')"
    :visible.sync="centerDialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="true"
    :before-close="handleClose"
    append-to-body
    class="my-dialog__wrapper tixian-container"
    width="40%"
  >
    <div class="tixian-content">
      <div class="type-box">
        <p class="title" style="margin-bottom: 0; margin-right: 1rem">
          {{ $t("类型") }}
        </p>
        <el-radio v-model="radio" label="5">{{ $t("微信") }}</el-radio>
        <el-radio v-model="radio" label="4">{{ $t("支付宝") }}</el-radio>
        <el-radio v-model="radio" label="2">{{ $t("银行卡") }}</el-radio>
      </div>
      <p class="title">{{ $t("提现金额") }}</p>
      <el-input :placeholder="0" v-model="price"></el-input>
      <p class="title" v-if="radio != 2">{{ $t("收款码") }}</p>
      <el-upload
        v-if="radio != 2"
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <p class="title">{{ $t("提现账号") }}</p>
      <el-input :placeholder="$t('请输入...')" v-model="accountNo"></el-input>
      <p class="title">{{ $t("姓名") }}</p>
      <el-input :placeholder="$t('请输入...')" v-model="name"></el-input>
      <p class="title" v-if="radio == 2">
        {{ $t("提现银行") }}
      </p>
      <el-input
        :placeholder="$t('请输入...')"
        v-model="bankName"
        v-if="radio == 2"
      ></el-input>
      <p class="title" v-if="radio == 2">
        {{ $t("开户地址") }}
      </p>
      <el-input
        :placeholder="$t('请输入...')"
        v-model="bankAddress"
        v-if="radio == 2"
      ></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">{{
        $t("取 消")
      }}</el-button>
      <el-button type="primary" v-loading="isLoading" @click="handleDone">{{
        $t("确 定")
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import api from "@/api/personcenter.js";
import api2 from "@/api/utils.js";
import myRate from "../../../components/my-rate.vue";
export default {
  components: {
    myRate,
  },
  data() {
    return {
      centerDialogVisible: false,
      isLoading: false,
      lang: null,
      content: "",
      radio: "5",
      uploadUrl: this.$store.state.baseURL + api2.upload,
      imageUrl: "",
      price: "",
      accountNo: "",
      name: "",
      bankName: "",
      bankAddress: "",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (res && res.code == 0) {
        this.imageUrl = res.data;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    openDialog(lang) {
      this.lang = lang;
      this.content = "";
      this.radio = "5";
      this.dialogImageUrl = "";
      this.imageUrl = "";
      this.centerDialogVisible = true;
      this.price = "";
      this.accountNo = "";
      this.name = "";
      this.bankName = "";
      this.bankAddress = "";
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async handleDone() {
      let params = {
        type: this.radio,
        price: this.price * 100,
        accountNo: this.accountNo,
        name: this.name,
      };
      if (this.radio == 2) {
        params.bankName = this.bankName;
        params.bankAddress = this.bankAddress;
      } else {
        params.accountQrCodeUrl = this.imageUrl;
      }
      this.isLoading = true;
      // 出方案的专家
      let res = await this.$http.post(api.createWithdraw, params, {
        headers: {
          lang: this.lang,
        },
      });
      this.isLoading = false;
      if (res && res.code == 0) {
        this.$message.success("提交成功");
        this.$emit('initUser')
        this.centerDialogVisible = false;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
  },
};
</script>
<style lang="scss">
.tixian-content {
  padding: 1rem 2rem;
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .title {
    font-size: 0.89rem;
    color: #666666;
    margin-bottom: 0.5rem;
  }
  .type-box {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
  }
  .el-radio__label {
    font-size: 1rem;
  }
  .el-textarea {
    font-size: 0.879rem;
  }
  .el-input {
    .el-input__inner {
      width: 100%;
      border-color: #425f9b;
      height: 3.56rem;
      font-size: 0.89rem;
      background: transparent;
    }
  }
  .el-upload-list--picture-card {
    .el-upload-list__item {
      width: 6.39rem;
      height: 7.44rem;
    }
  }
  .el-upload--picture-card {
    width: 6.39rem;
    height: 7.44rem;
    background: #ebf6ff;
    border-radius: 0.11rem 0.11rem 0.11rem 0.11rem;
    border: 1px solid rgba(66, 95, 155, 0.15);
    line-height: 7.44rem;
    img {
      width: 1.41rem;
      height: 1.41rem;
    }
  }
}
</style>
